<!--
 * @Author: your name
 * @Date: 2020-10-21 18:02:49
 * @LastEditTime: 2021-01-26 16:13:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\rights_management\add.vue
-->
<template>
    <div>  
        <el-dialog
            :title="$t('add')"
            :visible="rightVisible"
            width="600px"
            @close="()=>{$store.commit('setRightVisible',false)}">
            <el-form ref="form" :model="form" label-width="180px" >
                <el-form-item :label="$t('system.authority-rang')" prop="scope" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                    <el-select v-model="form.scope" :placeholder="$t('index.selectStates')">
                        <el-option
                        v-for="item in scopeDataList"
                        :key="item.id"
                        :label="item.text"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('login.tab-agent')" prop="agentId" :rules="[{ required: true, message: $t('index_js_notNull')}]" v-if='form.scope == 1 || form.scope == 2 || !form.scope'>
                    <el-select v-model="form.agentId" filterable  :placeholder="$t('index.selectStates')">
                        <el-option
                        v-for="item in agentList"
                        :key="item.sid"
                        :label="item.firmName"
                        :value="item.sid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('system.organization-account')" prop="scopeUser" :rules="[{ required: true, message: $t('index_js_notNull'),trigger: 'change'}]" v-if='form.scope == 2'>
                     <el-select
                        v-model="form.scopeUser"
                        filterable
                        remote
                        reserve-keyword
                        :placeholder="$t('common.ple-insert-keyword')"
                        :remote-method="remoteMethod"
                        :loading="loading">
                            <el-option
                            v-for="item in scopeUserData"
                            :key="item.ids"
                            :label="item.loginName"
                            :value="item.ids">
                            </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('system.user-account')" prop="UserText" :rules="[{ required: true, message: $t('index_js_notNull'),trigger: 'change'}]" v-if='form.scope == 3'>
                     <el-select
                        v-model="form.UserText"
                        filterable
                        remote
                        reserve-keyword
                        :placeholder="$t('common.ple-insert-keyword')"
                        :remote-method="searchUserMethod"
                        :loading="loading">
                            <el-option
                            v-for="item in searchUserData"
                            :key="item.ids"
                            :label="item.loginName"
                            :value="item.ids">
                            </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('system.authority')" prop="roleType" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                    <el-select v-model="form.roleType" filterable  :placeholder="$t('index.selectStates')">
                        <el-option
                        v-for="item in roleList"
                        :key="item.value"
                        :label="item.code"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setRightVisible',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        agentList:{
            type:Array,
            default:() => {return []}
        },
        roleList:{
            type:Array,
            default:() => {return []}
        }
    },
    data() {
        return {
            form:{
               scope:'1',
               agentId:'',
               roleType:'',
               scopeUser:'',
               UserText:''
            },
            scopeDataList:[{
                id:'1',
                text: this.$t('system.organization')
            },{
                id:'2',
                text: this.$t('system.organization-account')
            },{
                id:'3',
                text: this.$t('index.js_user')
            }],
            scopeUserData:[],
            loading:false,
            searchUserData:[]
        };
    },
    computed: {
        rightVisible(){
            return this.$store.state.sysStore.rightVisible
        }
    },
    watch: {
    },
    created() {

    },
    mounted() {

    },
    methods: {
        async remoteMethod(query){
            this.loading = true
            let {object:res} = await this.API.getUserByAgentId({
                name:query,
                agentId:this.form.agentId
            })
            this.scopeUserData = res || []
            this.loading = false
        },
        async searchUserMethod(query){
            this.loading = true
            let {object:res} = await this.API.searchUser({
                name:query,
            })
            this.searchUserData = res || []
            this.loading = false
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.addEntity()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async addEntity(){
            let params = {}
            if(this.form.scope == 1){
                params = {
                    scope:this.form.scope,
                    agentId:this.form.agentId,
                    roleType:this.form.roleType
                }
            }
            if(this.form.scope == 2){
                params = {
                    scope:this.form.scope,
                    agentId:this.form.agentId,
                    roleType:this.form.roleType,
                    userId:this.form.scopeUser
                }
            }
            if(this.form.scope == 3){
                params = {
                    scope:this.form.scope,
                    roleType:this.form.roleType,
                    userId:this.form.UserText
                }
            }
            let res = await this.API.functionRoleAddEntity(params)
            if(res.success){
                this.$message({
                    message: this.$t('index.control_success'),
                    type: 'success'
                });
            }else{
                this.$message({
                    message: this.$t('index.control_fail'),
                    type: 'warning'
                });
            }
            this.$store.commit('setRightVisible',false)
            this.$emit('uploadPage',true)
        }

    },
};
</script>

<style  lang="less" scoped>

</style>
